<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel" >
        <a-form-model ref="appForm" :model="mdl" :rules="rules" layout="vertical" class="rx-a-form-vertical" style="padding:0 12px">
            <a-tabs >
                <a-tab-pane :tab="i18n('form.base','基础信息')" forceRender key="base" style="padding: 12px;">
                    <a-row :gutter="24" >
                        <a-col :span="12">
                            <a-form-model-item prop="clientName"  :label="i18n('form.appName','名称')">
                                <rx-input-i18n :placeholder="i18n('form.appName','名称')" :isDecorator="true"
                                               @blur="getPinyin"
                                               v-model="mdl.clientName"
                                               />

                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item prop="clientCode"  >
                                <span slot="label">{{i18n('form.appCode','编码')}}</span>
                                <a-input :placeholder="i18n('form.appCode','编码')"
                                         v-model="mdl.clientCode" />
                            </a-form-model-item>
                        </a-col>
                </a-row>
                <a-row :gutter="24" v-if="openFrom==1" >
                    <a-col :span="12">
                        <a-form-model-item  label="应用类型">
                            <a-radio-group   v-model="mdl.appType"    :options="appTypeOptions">
                            </a-radio-group>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item prop="categoryId"  >
                                <span slot="label">
                                    {{i18n('form.classify','分类')}}
                                      <a-tooltip>
                                          <template slot="title">
                                              {{i18n('msa.creatCateMsa1','分类为空时，请前往')}}
                                              <a :href="basePath+'/sysMgr/home/sysAppList'" target="_blank">
                                                  {{i18n('msa.creatCateMsa2','【系统管理-系统应用】')}}
                                              </a>
                                              {{i18n('msa.creatCateMsa3','创建分类')}}
                                          </template>
                                          <a-icon type="question-circle-o" />
                                      </a-tooltip>
                                </span>
                                <rx-category-select cat-key="APP" :isGrant="true" v-model="mdl.categoryId"
                                                    @change="() => {$refs.categoryId.onFieldChange()}">
                                </rx-category-select>
                        </a-form-model-item>
                    </a-col>
                </a-row>

                <a-row :gutter="24" v-if="openFrom==0">
                    <a-col :span="12">
                        <a-form-model-item prop="categoryId" >
                            <span slot="label">
                                {{i18n('form.classify','分类')}}
                                  <a-tooltip>
                                      <template slot="title">
                                          {{i18n('msa.creatCateMsa1','分类为空时，请前往')}}
                                          <a :href="basePath+'/sysMgr/home/sysAppList'" target="_blank">
                                              {{i18n('msa.creatCateMsa2','【系统管理-系统应用】')}}
                                          </a>
                                          {{i18n('msa.creatCateMsa3','创建分类')}}
                                      </template>
                                      <a-icon type="question-circle-o" />
                                  </a-tooltip>
                            </span>
                            <rx-category-select cat-key="APP" :isGrant="true" v-model="mdl.categoryId"
                                                @change="() => {$refs.categoryId.onFieldChange()}"
                            >
                            </rx-category-select>
                        </a-form-model-item>
                    </a-col>

                    <a-col :span="12" >
                        <a-form-model-item >
                            <span slot="label">
                                {{ i18n('form.dataSource', '数据源') }}
                                  <a-tooltip>
                                      <template slot="title">
                                          {{i18n('msa.dataSourceDesc', ' 当表单、列表、对话框等新增时未配置数据源，会以此为默认数据源')}}
                                      </template>
                                      <a-icon type="question-circle-o" />
                                  </a-tooltip>
                            </span>
                            <rx-input-button v-model="mdl.dataSource"
                                             style="width: 100%;" class="input-button-edit" @click="openDataSource"></rx-input-button>
                        </a-form-model-item>
                    </a-col>

                </a-row>
                <a-row :gutter="24" >

                    <a-col :span="12" >
                        <a-form-model-item >
                                <span slot="label">{{ i18n('form.openWith', '打开方式') }}
                                    <a-tooltip>
                                        <a-icon type="question-circle-o"/>
                                        <template #title>
                                            {{ i18n('msa.builtInDesc', '内置:...') }}<br/>
                                            {{ i18n('msa.windowDesc', '新窗口:...') }}<br/>
                                        </template>
                                    </a-tooltip>
                                </span>
                            <a-radio-group  v-model="mdl.menuNavType"   :options="openTypeOptions">
                            </a-radio-group>

                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12" v-show="[1,2].includes(mdl.menuNavType)" >
                        <a-form-model-item  >
                            <span slot="label">
                                {{i18n('form.microPath','微前端路径')}}
                                  <a-tooltip :title="i18n('msa.microFrontPath','路径为打开微前端的nginx配置')">
                                      <a-icon type="question-circle-o" />
                                  </a-tooltip>
                            </span>
                            <a-input  :placeholder="i18n('form.microPath','微前端路径')" v-model="mdl.path" />
                        </a-form-model-item>
                    </a-col>

                    <a-col :span="12" v-show="[3].includes(mdl.menuNavType)" >
                        <a-form-model-item :label="i18n('form.externalPath','外部URL')" >
                            <a-input  :placeholder="i18n('form.externalPath','外部URL')" v-model="mdl.path" />
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row v-if="[1].includes(mdl.menuNavType) && mdl.appType==1" :gutter="24" >
                    <a-col  >
                        <a-form-model-item :label="i18n('form.workspace', '流程工作台')">
                            <a-radio-group name="radioGroup"
                                           v-model="mdl.isWorkspace">
                                <a-radio value="1">{{i18n('form.display','显示')}}</a-radio>
                                <a-radio value="0">{{i18n('form.notDisplayed','不显示')}}</a-radio>
                            </a-radio-group>

                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24" >
                    <a-col :span="12">
                        <a-form-model-item  :label="i18n('form.icon','图标')" prop="iconPic">
                            <a-input @click="iconselect()" :enterButton="i18n('form.selectIcon','选择图标')"
                                     :placeholder="i18n('form.selectIcon','选择图标')" ref="iconInput"
                                     v-model="mdl.iconPic">
                                <a-icon slot="suffix" type="close-circle" @click="emitEmpty"/>
                                <i slot="prefix" :class="iconClass"/>
                            </a-input>
                            <a-input v-show="false" v-model="mdl.icon"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item  :label="i18n('form.backColor','图标背景颜色')">
                            <div class="a-input-color" @click="getBackColor(mdl.backColor)">
                                <span :style="{'background':mdl.backColor}"></span>
                            </div>
                        </a-form-model-item>

                    </a-col>
                </a-row>
                <a-row :gutter="24" >
                    <a-col :span="12">
                        <a-form-model-item  :label="i18n('form.sn','序号')">
                            <a-input-number :min="0" :max="1000000" :placeholder="i18n('form.sn','序号')"
                                            v-model="mdl.sn"/>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item  :label="i18n('form.status','状态')">
                            <a-radio-group name="radioGroup"
                                           v-model="mdl.status">
                                <a-radio value="1">{{i18n('form.enabled','已启用')}}</a-radio>
                                <a-radio value="0">{{i18n('form.paused','已暂停')}}</a-radio>
                            </a-radio-group>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24" >
                    <a-col :span="24">
                        <a-form-model-item  :label="i18n('form.describe','描述')">
                            <a-textarea :placeholder="i18n('form.describe','描述')"
                                        v-model="mdl.descp"
                                        :rows="4"/>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                </a-tab-pane>
                <a-tab-pane key="home" forceRender v-if="mdl.appType!='1' && mdl.menuNavType!='3'" >
                    <div slot="tab"  v-show="mdl.appType!='1'">{{i18n('form.basicHomepage','应用首页')}}</div>
                    <div v-show="mdl.appType!='1'" style="padding: 12px">
                        <a-row :gutter="24">
                            <a-col :span="12">
                                <a-form-model-item  :label="i18n('form.authorized','是否授权')">
                                    <a-radio-group :options="isAuths"
                                                   v-model="mdl.isAuth"/>
                                </a-form-model-item>
                            </a-col>

                            <template v-if="mdl.isAuth!='YES'">
                                <a-col :span="12">
                                    <a-form-model-item  :label="i18n('form.layout','布局')">
                                        <a-radio-group :options="layouts"
                                                       v-model="mdl.layout"/>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12"   >
                                    <a-form-model-item
                                        :label="i18n('form.access','访问方式')">
                                        <a-radio-group :options="showTypeOptions"
                                                       v-model="mdl.urlType"/>
                                    </a-form-model-item>
                                </a-col>

                                <a-col :span="12"  >
                                    <a-form-model-item :label="i18n('form.settingType','配置类型')">
                                        <a-radio-group v-model="mdl.homeType">
                                            <a-radio value="custom">
                                                {{i18n('form.vueComponent','VUE组件')}}
                                            </a-radio>
                                            <a-radio value="iframe">
                                                IFrame
                                            </a-radio>
                                        </a-radio-group>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="24" v-show="mdl.homeType=='custom'  ">
                                    <a-form-model-item
                                        :label="i18n('form.componentPath','组件路径')">
                                        <a-input v-model="mdl.homeUrl" style="width: calc( 100% - 20px )"
                                                 :placeholder="i18n('form.componentPath','组件路径')"/>
                                        <a-tooltip>
                                            <template slot="title" style="width:400px;">
                                                {{i18n('msa.componentPathDesc','组件路径是...')}}
                                            </template>
                                            <a-icon type="question-circle-o"/>
                                        </a-tooltip>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="24" v-if="mdl.homeType=='custom'  ">
                                    <a-form-model-item :label="i18n('form.componentParams','组件参数')">
                                        <a-input v-model="mdl.params" :placeholder="i18n('form.componentParams','组件参数','input')"/>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="24" v-show="mdl.homeType=='iframe' ">
                                    <a-form-model-item
                                        label="URL">
                                        <a-input v-model="mdl.homeUrl" :placeholder="i18n('form.url','URL','input')"/>
                                    </a-form-model-item>
                                </a-col>

                            </template>
                            <template v-else>
                                <a-col :span="24">
                                    <a-button class="tab" @click="addRow" style="margin-bottom: 1vw;">{{i18n('form.addTab','新增Tab')}}</a-button>
                                    <div v-for="(item, index) in gridData" :key="index" class="tablist">
                                        <a-collapse default-active-key="1" expand-icon-position="right" style="margin-bottom: 1vw;">
                                            <a-collapse-panel key="1" :header="i18n('form.tabModule','Tab模块') + Number(index + 1)">
                                                <a-row :gutter="24">
                                                    <a-col :span="12">
                                                        <a-form-model-item  :label="i18n('form.layout','布局')">
                                                            <a-radio-group :options="layouts"  v-model="item.layout"/>
                                                        </a-form-model-item>
                                                    </a-col>
                                                    <a-col :span="12"  >
                                                        <a-form-model-item :label="i18n('form.settingType','配置类型')">
                                                            <a-radio-group v-model="item.homeType">
                                                                <a-radio value="custom">
                                                                    {{i18n('form.vueComponent','VUE组件')}}
                                                                </a-radio>
                                                                <a-radio value="iframe">IFrame</a-radio>
                                                            </a-radio-group>
                                                        </a-form-model-item>
                                                    </a-col>
                                                    <a-col :span="12"   >
                                                        <a-form-model-item  :label="i18n('form.access','访问方式')">
                                                            <a-radio-group :options="showTypeOptions" v-model="item.urlType"/>
                                                        </a-form-model-item>
                                                    </a-col>
                                                    <a-col :span="24" v-if="item.homeType=='custom' " >
                                                        <a-form-model-item  :label="i18n('form.componentPath','组件路径')">
                                                            <a-input v-model="item.homeUrl" style="width:calc( 100% - 20px )" :placeholder="i18n('form.componentPath','组件路径')"/>
                                                            <a-tooltip>
                                                                <template slot="title" style="width:400px;">
                                                                    {{i18n('msa.componentPathDesc','组件路径是...')}}
                                                                </template>
                                                                <a-icon type="question-circle-o"/>
                                                            </a-tooltip>
                                                        </a-form-model-item>
                                                    </a-col>
                                                    <a-col :span="24" v-if="item.homeType=='custom' ">
                                                        <a-form-model-item  :label="i18n('form.componentParams','组件参数')">
                                                            <a-input v-model="item.params" :placeholder="i18n('form.componentParams','组件参数','input')"/>
                                                        </a-form-model-item>
                                                    </a-col>

                                                    <a-col :span="24" v-if="item.homeType=='iframe' ">
                                                        <a-form-model-item   label="URL">
                                                            <a-input v-model="item.homeUrl" :placeholder="i18n('form.url','URL','input')"/>
                                                        </a-form-model-item>
                                                    </a-col>

                                                </a-row>
                                                <my-icon slot="extra" type="iconsetup" @click.stop="editRow(item)"></my-icon>
                                                <span slot="extra" style="margin: 0vw .4vw"></span>
                                                <a-icon slot="extra" type="delete" @click="deleteRow(index)"/>
                                            </a-collapse-panel>
                                        </a-collapse>
                                    </div>
                                </a-col>
                            </template>
                        </a-row>
                    </div>

                </a-tab-pane>
            </a-tabs>
        </a-form-model>
        <iconSelector-modal ref="iconModel" @ok="setIcon"/>
    </rx-dialog>
</template>
<script>
import DialogBox from "@/assets/js/DialogBox";
import IconSelectorModal from './IconSelectorModal.vue'
import SysAppApi from '@/api/system/core/sysApp'
import {BaseFormModel, RxDiaog,RxInputI18n,Util,Dialog,JsConstant} from "@lowcode/jpaas-common-lib";
import {mapMutations, mapState} from 'vuex'
import myColor from "@/components/myColor/myColor.vue"
import AppName from "@/assets/js/AppName.js";
export default {
    name: 'SysAppEdit',
    mixins: [BaseFormModel,AppName],
    components: {
        RxDiaog,
        IconSelectorModal,
        RxInputI18n
    },
    data() {
        return {
            basePath: process.env.VUE_APP_ADMIN_FRONT,
            showTypeOptions: [
                {label: this.i18n('form.urlAccess','URL访问'), value: 'URL'},
                {label: this.i18n('form.window','新窗口'), value: 'NEW_WIN'}
            ],
            layouts: [
                {label: this.i18n('form.many','多页面'), value: 'many'},
                {label: this.i18n('form.single','单页面'), value: 'single'}
            ],
            isAuths: [
                {label: this.i18n('form.yes','是'), value: 'YES'},
                {label: this.i18n('form.no','否'), value: 'NO'}
            ],
            //前端打开方式
            frontOpenType:[
                {"value":0,"label": this.i18n('form.builtIn', '内置')},
                {"value":1,"label": this.i18n('form.window', '新窗口')},
                {"value":2,"label": this.i18n('form.microFront', '内置微前端')}
            ],
            // 后端打开方式
            backOpenType:[
                {"value":0,"label": this.i18n('form.builtIn', '内置')},
                {"value":3,"label": this.i18n('form.url', '外部连接')},
            ],
            // 应用类型.
            appTypeOptions:[
                {"value":0,"label": this.i18n('form.backApp', '后端应用')},
                {"value":2,"label": this.i18n('form.frontApp', '前端应用')},
            ],
            // 这个是表示从哪里打开(showType_,1后端应用,0,前端应用)
            openFrom: this.$parent.showType_,
            // 应用首页授权数据.
            gridData: [],

            rules: {
                clientName: [
                    {required: true, message: '请输入应用名', trigger: 'blur'},
                ],
                clientCode: [
                    {required: true, message: '请输入别名', trigger: 'blur'},
                ],
                categoryId: [
                    {required: true, message: '请选择分类', trigger: 'change'},
                ],
                iconPic:[
                    {required: true, message: '请选择图标', trigger: 'blur'},
                ]
            }
        }
    },
    computed:{
        ...mapState({
            navigation: state => state.appSetting.navigation,
            activeKey: state => state.appSetting.activeKey,

        }),

        iconClass: function (){
            if(this.mdl.iconPic){
                return "iconfont " + this.mdl.iconPic;
            }
            return "";
        },
        //打开类型选项
        openTypeOptions(){
            // 这个是表示从哪里打开(showType_,1后端应用,0,前端应用)
            return this.openFrom==1?  this.backOpenType:this.frontOpenType;
        },

    },
    methods: {
        ...mapMutations('appSetting', ['setActiveKey', 'setNavigation']),
        i18n(name,text,key){
            return this.$ti18(name,text,"SysApp",key);
        },
        boentI18n(name,text,key){
            return this.$ti18(name,text,"formBoEntity",key);
        },
        onload_(values) {
            if(!values){
                //0.前端应用,1.后端打开
                if(this.openFrom=="1"){
                    this.$set(this.mdl,"appType",0) ;
                    this.$set(this.mdl,"menuNavType",0) ;
                    this.$set(this.mdl,"status","1") ;
                }
                else{
                    this.$set(this.mdl,"appType",1) ;
                    this.$set(this.mdl,"menuNavType",0) ;
                    this.$set(this.mdl,"status","1") ;
                }
                this.$set(this.mdl,"sn",1) ;
                this.$set(this.mdl,"layout","many") ;
                this.$set(this.mdl,"parentModule","MainLayout") ;
                this.$set(this.mdl,"homeType","custom") ;
                this.$set(this.mdl,"isAuth","NO") ;
                this.$set(this.mdl,"urlType","URL") ;
                this.$set(this.mdl,"clientName","") ;
                this.$set(this.mdl,"clientCode","") ;
                this.$set(this.mdl,"isWorkspace","1") ;
                this.$set(this.mdl,"backColor","#4285f4") ;
                this.$set(this.mdl,"path","/apps") ;
                return ;
            }

            if(!values.path && values.appType=='1'){
                values.path="/apps"
            }
            if (values.isAuth == 'YES') {
                this.gridData=JSON.stringify(this.authSetting);
            }

        },
        get(id) {
            return SysAppApi.get(id);
        },
        handleSubmit(vm) {
                let formData= this.mdl;
                vm.loading = false;
                let routeId = this.$route ?this.$route.params.id:"";
                if (this.pkId) {
                    formData.pkId = this.pkId;
                } else {
                    if (routeId && routeId != "add") {
                        formData.pkId = routeId;
                    } else {
                        formData.pkId = ''
                    }
                }
                this.confirmLoading = true;

                let appId=this.curApp.appId;
                if(appId && !this.pkId){
                    formData.appId=appId;
                }
                this.onSubmit(formData);
                let self_ = this ;
                this.$refs.appForm.validate(valid => {
                    if(!valid){
                        return false;
                    }
                    self_.save(formData,vm).then(res => {
                        if (res.success && res.code == 200) {
                            //返回结果数据。
                            self_.resultData = res.data;
                            let _layerid = self_.layerid;//根据判断有没有弹窗的id来判断是不是弹窗方式打开的页面 ;
                            if(self_.showType != "newPage"){
                                if (_layerid) {
                                    Util.closeWindow(self_, "ok");
                                } else {
                                    self_.$bus.emit("closeTab", {action: "current"});
                                }
                            }
                        }
                        vm.loading = false;
                    }).catch(() => {
                        self_.$message.error(self_.$ti18('rxMsa.sysError','系统错误'));
                        vm.loading = false;
                    }).finally(() => {
                        self_.confirmLoading = false;
                        vm.loading = false;
                    })

                });

        },
        save(values,vm) {
            if (values.isAuth == 'YES') {
                values.authSetting = JSON.stringify(this.gridData);
            }
            return SysAppApi.save(values)
        },
        setIcon(icon) {
            this.$set(this.mdl,'iconPic', icon.icon);
            this.$set(this.mdl,'icon', JSON.stringify(icon));
        },
        emitEmpty() {
            this.$refs.iconInput.focus();
            this.$set(this.mdl,'iconPic', '');
            this.$set(this.mdl,'icon', '');
        },
        iconselect() {
            this.$refs.iconModel.show();
        },
        getPinyin(){
            let name= this.$i18(this.mdl.clientName);
            if(!name){
                return;
            }
            SysAppApi.getPinyin(name).then(res => {
                //去除不可见的特殊符号
                if(res){
                    res=res.replace(/\u200B/g,'');
                }
                this.$set(this.mdl,"clientCode",res);
            })
        },
        openDataSource(vm){
            var form=this.form;
            Dialog.openDataSourceDialog({
                curVm: this, widthHeight: ['1200px', '600px'],
                data: {appName: this.serviceName}
            }, function (self, data) {
                vm.setVal(data.alias, data.name);
            })
        },

        addRow() {
            this.gridData.push({
                layout: 'many',
                parentModule: 'MainLayout',
                homeType: 'custom',
                homeUrl: '',
                params: '',
                urlType: 'URL',
                setting: {"label": this.i18n('form.owner','所有人'), "value": "everyone"}
            })
        },
        //删除行
        deleteRow(index) {
            this.gridData.splice(index, 1)
        },
        editRow(item) {
            DialogBox.openPermissionUser(this, item.setting ? item.setting.value : '', function (self_, data) {
                item.setting = data;
            });
        },
        getBackColor(backColor){
            let self = this;
            Util.open({
                component:myColor ,
                curVm: this,
                zIndex:999999,
                widthHeight: ['600px', '400px'],
                title:this.i18n('form.backColor','图标背景颜色'),
                data: {
                    backColor:backColor
                },
            },  function (action,data) {
                if(action!="ok") return;
                self.mdl.backColor = data

            })
        }
    }
}
</script>

<style scoped>
.a-input-color{
    width: 100px;
    height: 32px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    padding: 4px 11px;
    cursor: pointer;
}
.a-input-color span{
    display: block;
    height: 22px;
}
</style>
